<template>
	<view class="container">
		<empty v-if="llqzList.length == 0"></empty>
		<view class="forum_box" v-for="(item,index) in llqzList" :key="index" v-else>
			<view class="user_name">
				<view class="name_icon">
					<image :src="item.imageUrl" class="name_icon" style="width: 100%;height:100%" />
					<!-- <view class="name_icon">
						{{item.name[0].toUpperCase()}}
					</view> -->
				</view>
				<view style="height: 100%;">
					<view class="name_text">{{item.name}}</view>
					<view class="community_text">{{item.communityName}}</view>
				</view>
				<view class="title_tag" v-if="item.entity.inspect != '102' ">
					{{item.entity.inspect == '101'?"审核中":"未通过"}}
				</view>
			</view>
			<view>
				<view class="forum_content" style="	font-weight: bold;" @click="gotoComment(item)">
					{{item.entity.title}}
				</view>
				<view class="forum_content" @click="gotoComment(item)">
					{{item.entity.content}}
				</view>
				<view class="forum_photo_box">
					<view class="photo_item" v-for="(img,i) in item.imageEntityList" :key="i">
						<image :src="img.url" style="width: 100%;height:100%" @click="previewImg(item,i)" />
					</view>
				</view>
			</view>
			<view class="forum_time">
				<view class="time_info">
					{{item.entity.createDate}}
				</view>
				<view class="comment_info" v-if="item.entity.inspect == '102'">
					<span @click="gotoComment(item)">
						<uni-icons type="chat" style="font-size:24upx;margin-right: 5upx;" />
						{{item.commentCount}}
					</span>
					<span @click="addForumGive(item)">
						<uni-icons type="hand-thumbsup" class="icon_class" style="margin-right: 5upx; font-size: 24upx;"
							:color="item.isCancle == 1 ? 'red': ''" />
						<!-- :style="this.isActive == false ? 'font-size: 24upx;margin-right: 5upx ;': 'margin-right: 5upx ;color:red;font-size: 24upx;'" /> -->
						{{item.entity.likes}}
					</span>
				</view>
			</view>
			<view v-if="item.entity.inspect == '101'" class="underReview">注：本条内容还在审核中，当前仅自己可见</view>
			<view v-else-if="item.entity.inspect == '100'" class="underReview">注：本条内容未通过审核，原因：{{item.entity.inspectMsg}}
			</view>
		</view>

		<view class="bottom_box" @click="navTo()">
			+
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				loadingType: "more",
				page: 1,
				llqzList: [],
				likes: 0,
				banRefresh: false,
				communityId: this.$api.util.getAreaCode()
			}
		},
		onLoad() {
			// this.$api.sysauth.checkLoginAndBindCommunity();
		},
		onShow() {
			if (this.banRefresh) {
				this.banRefresh = false;
				return;
			}
			this.llqzList = []
			this.getNeighborList(1)
		},
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.page = this.page + 1;
				this.getNeighborList(this.page)
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'defaultCommunityId'])
		},
		components: {
			empty
		},
		methods: {
			getNeighborList(page) {
				let UserID = this.userInfo.userUuid
				console.log(UserID)
				this.$api.request.getNeighborList({
					"userUuid": UserID,
					"areaCode": this.communityId,
					// "areaCode": "2021012765730029",
					"startTime": "",
					"endTime": "",
					"title": "",
					"page": page,
					"rows": "5",
					"inspect": "102"
				}, (res) => {
					console.log(res)
					if (res.body.status.statusCode == '0') {
						this.llqzList = this.llqzList.concat(res.body.data.list)
						var total = res.body.data.total
						console.log(this.llqzList)
						for (var i = 0; i < this.llqzList.length; i++) {
							for (var j = 0; j < this.llqzList[i].userUuid.length; j++) {
								if (UserID == this.llqzList[i].userUuid[j]) {
									console.log('我点赞了')
									this.llqzList[i].isCancle = 1
								}
							}
						}
						if (this.llqzList.length >= total) {
							this.loadingType = 'noMore'
						}
					}
				})
			},
			//点赞
			// addComment(item) {
			// 	console.log(item)

			// 	this.addForumGive(item.entity.neighborShareId, item.entity.userUuid)	
			// 	// if (this.isActive == true) {
			// 	// 	item.entity.likes--;
			// 	// 	this.isActive = false
			// 	// } else {
			// 	// 	item.entity.likes++;
			// 	// 	this.isActive == true
			// 	// }
			// },
			//点赞
			addForumGive(item) {
				if (!this.hasLogin) {
					this.$api.msg('请登录后再体验该功能')
				} else {
					let id = item.entity.neighborShareId
					let UserID = this.userInfo.userUuid
					let params = {
						"neighborShareId": id,
						"userUuid": UserID
					}
					this.$api.request.likeOrCancel(params, (res) => {
						if (res.body.status.statusCode == 0) {
							if (item.entity.likes < res.body.data.like) {
								item.isCancle = 1
							}
							if (item.entity.likes > res.body.data.like) {
								item.isCancle = ''
							}
							item.entity.likes = res.body.data.like
							console.log(res.body)

						}
					})
				}


			},
			// 取消点赞
			cancelForumGive() {

			},
			gotoComment(item) {
				if (!this.hasLogin) {
					this.$api.msg('请登录后再体验该功能')
				} else {
					uni.navigateTo({
						url: "/package_biz/pages/forum/forum_detail?forum=" + encodeURIComponent(JSON.stringify(
							item))
					})
				}
			},
			navTo() {
				let community = uni.getStorageSync('bindCommunityInfo');
				if (community == '' || community == null || community == undefined) {
					this.$api.msg('请绑定小区后再体验该功能')
				} else {
					uni.navigateTo({
						url: "/package_biz/pages/forum/forum_add"
					})
				}

			},
			previewImg(items, index) {
				let _this = this;
				let imgsArray = items.imageEntityList;
				let imgsArrayList = [];
				for (var i = 0; i < imgsArray.length; i++) {
					imgsArrayList.push(imgsArray[i].url);
				}
				uni.previewImage({
					current: index,
					urls: imgsArrayList
				});
				this.banRefresh = true
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
	}

	.forum_box {
		width: 100%;
		padding: 20upx 3% 30upx 3%;
		margin-bottom: 10upx;
		background-color: white;
		position: relative;
	}

	.user_name {
		width: 100%;
		height: 100upx;
		line-height: 40upx;
		display: flex;
		flex-direction: row;
	}

	.name_icon {
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 50upx;
		background-color: #5FBCF0;
		color: white;
		text-align: center;
		font-weight: 800;
	}

	.title_tag {
		position: absolute;
		top: 20upx;
		right: 20upx;
		height: 40upx;
		border-radius: 10upx;
		line-height: 40upx;
		border: 1upx solid #1DA3EE;
		color: #1DA3EE;
		padding-right: 20upx;
		padding-left: 20upx;
		font-size: 22upx;
		text-align: center;
	}

	.name_text {
		margin-left: 20upx;
		font-size: 28upx;
		font-weight: 600;
	}

	.community_text {
		margin-left: 20upx;
		font-size: 22upx;
		font-weight: 200;
	}

	.forum_content {
		width: 100%;
		font-size: 26upx;
		margin-top: 20upx;
	}

	.forum_photo_box {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap
	}

	.photo_item {
		width: 210upx;
		height: 210upx;
		margin-left: 15upx;
		margin-bottom: 15upx;
	}

	.forum_time {
		width: 100%;
		height: 40upx;
		line-height: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.time_info {
		width: 50%;
		height: 100%;
		font-size: 24upx;
		color: #888888;
	}

	.comment_info {
		width: 50%;
		height: 100%;
		text-align: right;
		font-size: 24upx;
	}

	.text_input {
		height: 60upx;
		border: 1px solid white;
		border-radius: 30upx;
		background-color: #d5d5d5;
	}

	input {
		padding-left: 30upx
	}

	.bottom_box {
		position: fixed;
		bottom: 40upx;
		right: 40upx;
		z-index: 99;
		width: 70upx;
		height: 70upx;
		border-radius: 40upx;
		color: white;
		font-weight: normal;
		background-color: #55aaff;
		line-height: 60upx;
		text-align: center;
		font-size: 50upx;
		box-shadow: #888888 5upx 5upx 5upx;
		border: 5upx solid #ffffff;
	}

	.up_class {
		color: red;
	}

	.icon_class {
		/* font-size: 20upx; */
		margin-right: 5upx;
		margin-left: 20upx;
	}

	.underReview {
		font-size: 24upx;
		color: #FF7B7B;
	}
</style>
